{% extends "base_views.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<link rel="stylesheet" href="/css/dashboard.css" />
<script type="text/javascript" src="/js/dashboard.js"></script>
<!-- TOOLTIPS -->
<link rel="stylesheet" href="/css/jquery.tooltip.css" />
<script src="/js/jquery.bgiframe.js" type="text/javascript"></script>
<script src="/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="/js/jquery.tooltip.js" type="text/javascript"></script>
<script src="/js/chili-1.7.pack.js" type="text/javascript"></script>

<span class="dashboardTitle">Group: 
	<select id="package_group" name="package_group" class="slctPkgGrp" onchange="javascript:onChangePackageGroup();">
		{% for pkgg in packages_groups %}
		<option value="{{pkgg.id}}">{{pkgg.name}}</option>
		{% endfor %}
	</select>
</span>

<fieldset id="dashboardicons">
<table id="tblDashboard" class="tblDashboard">
	<tbody>
		<tr brand="upperRow">
			<th class="thUpperLeft"></th>
			{% for customer in customers %}
			<th style="border: 1px solid white;"><div class="verticalText">{{customer.name}}</div></th>
			{% endfor %}
		</tr>
		{% for item in matriz %}
		<tr id="item_{{item.0.0}}" brand="{{item.0.2}}" class="trItemTitle">
			<td class="tdItemTitle">{{item.0.1}}</td>
			{% for customer in customers %}
			<td id="customer_{{customer.id}}" class="tdPackageStatus" style="text-align:right;">
				<span class="pkgstatus_" title="There is no information about package status. <br />Please contact system administrator."></span>
			</td>
			{% endfor %}
		</tr>
		{% endfor %}
	</tbody>
</table>
</fieldset>
<a href="#" onclick="javascript:actionRefreshView();" class="bttn icon refresh">Refresh</a>
<!-- VIEW'S ICONOGRAPHY -->
<fieldset id="iconography">
	<table id="tblIconography">
		<tr>
			<td class="tdIconographyIcon" title="Package being processed.">
				<a href="#"><img src="/images/icons/hourglass.png"><br />Queued</a></td>
			<td class="tdIconographyIcon" title="Package ready for download.">
				<a href="#"><img src="/images/icons/tick.png"><br />Packaged</a></td>
			<td class="tdIconographyIcon" title="Error while creating package. Please contact system administrator.">
				<a href="#"><img src="/images/icons/exclamation.png"><br />Error</a></td>
			<td width="99%"></td>
		<tr>
	</table>
</fieldset>

<script>
    var json_items_string = "{ {% for item in items %} \"{{item.id}}\": \"{{item.status}}\", {% endfor %} \"0\": \"0\" }";
    var json_string = "{\"items\": [{% for item in matriz %}{\"item\":{{item.0.0}}, \"brand\":\"{{item.0.2}}\", \"pkgs\":[{% for pkg in item.1 %}{\"pkg_id\":{{pkg.0}}, \"customer_id\":{{pkg.1}}, \"pkg_status\":\"{{pkg.2}}\", \"pkg_error\":\"{{pkg.3}}\"},{% endfor %}{\"pkg_id\":0, \"customer_id\":0, \"pkg_status\":\"\"}]},{% endfor %}{\"item\":0, \"pkgs\":[]}]}";
</script>
<!-- HIDDEN FIELDS -->
<input type="hidden" id="package_group_id" name="package_group_id" value="{{package_group.id}}" />
<input type="hidden" id="package_group_name" name="package_group_name" value="{{package_group.name}}" />
<input type="hidden" id="package_group_desc" name="package_group_desc" value="{{package_group.description}}" />
<input type="hidden" id="total_customers" name="total_customers" value="{{customers|length}}" />
{% endblock %}

{% block action_bar %}
<!-- ACTION BAR -->
{% endblock %}